<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏栀来信 - 用户注册</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="top-bar">
            <span>学号: 23215220329 姓名: 牟其鑫</span>
            <div class="user-actions">
                <a href="login.html">登录</a> | <a href="register.html">注册</a>
            </div>
        </div>
        <div class="main-header">
            <div class="logo">夏栀来信</div>
            <div class="search-box">
                <form id="search-form" action="search.html" method="get">
                    <input type="text" name="q" placeholder="搜索商品..." required>
                    <button type="submit">搜索</button>
                </form>
            </div>
            <div class="cart-icon">
                <a href="cart.html">购物车(<span id="cart-count">0</span>)</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">热门推荐</a></li>
                <li><a href="#">节日限定</a></li>
                <li><a href="#">园艺工具</a></li>
                <li><a href="#">养护指南</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="auth-container">
            <h2>用户注册</h2>
            <form id="register-form">
                <div class="form-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" name="username" placeholder="请输入用户名(4-16位字符)" required minlength="4" maxlength="16">
                </div>
                <div class="form-group">
                    <label for="reg-email">电子邮箱</label>
                    <input type="email" id="reg-email" name="email" placeholder="请输入有效邮箱地址" required>
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" name="password" placeholder="请输入密码(6-20位字符)" required minlength="6" maxlength="20">
                </div>
                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" name="confirm-password" placeholder="请再次输入密码" required>
                </div>
                <button type="submit" class="auth-btn">注 册</button>
            </form>
            <div class="auth-switch">
                已有账号？<a href="login.html">立即登录</a>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2023 夏栀来信网上购物商城 版权所有</p>
            <p>地址：某某省某某市某某区某某路123号</p>
            <p>联系电话：123-45678901</p>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>